<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>	
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#map_canvas {
	height: 100%
}
</style>

<script>
	$(document).ready(function(){
	
		initialize();
		markPlace();
	});
	var map;
	var geocoder ;
	function initialize() {
		geocoder = new google.maps.Geocoder();
		var latlng = new google.maps.LatLng(-34.397, 150.644);
		var myOptions = {
			zoom : 8,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);
		
		google.maps.event.addListener(map,"click",function(event){
			
			//alert(event.latLng.lat());
			
			geocoder.geocode({'latLng':event.latLng},function(results,status){
				
				if(status == google.maps.GeocoderStatus.OK){
					/*
					if(results[1]){
						for(i = 0; i<results.length; i++){
							alert(results[i].formatted_address);
						}
					}
					*/
					/* show the address detail */
					
					
					$('#selectedAddress').html(results[0].formatted_address);
				}
				
			});
			
		});
	}
	
	function markPlace(){
		var point = new google.maps.LatLng(-33.8833,151.2167)
		
		var marker = new google.maps.Marker({
			position : point,
			map : map,
			title :"click me to show something"
		});
		
	}
	
	function searchAddress() {
	   var address = $('#searchAddress').val();
	   geocoder.geocode( { 'address': address}, function(results, status) {
	     if (status == google.maps.GeocoderStatus.OK) {
	       map.setCenter(results[0].geometry.location);
	       var marker = new google.maps.Marker({
	           map: map, 
	           position: results[0].geometry.location
	       });
	       $('#selectedAddress').html( $('#searchAddress').val());
	     } else {
	       alert("Geocode was not successful for the following reason: " + status);
	     }
	   });
	}
	
	
	

</script>
</head>
<body>
<div style="width: 100%">Search: <input type="text" id="searchAddress" /><input type="button" value="Search" onclick="searchAddress()" /></div>
<div id="map_canvas" style="width: 50%; height: 100%;float: left"></div>
<div id="lcdList" style = "width: 50%;height:100%; float: right;white-space: nowrap;vertical-align: top;">
	You selected address is :<div id="selectedAddress" ></div>
	
</div>
</body>
</html>